<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>动态模糊导航菜单</title>
		<link rel="stylesheet" href="./47-动态模糊导航菜单.css">
	</head>
	<details>
		实现了一个带有模糊效果的导航栏，当鼠标悬停在导航栏上时，未悬停的导航项会变得模糊并降低透明度，而悬停的导航项则会变得清晰并提高透明度。
	</details>
	<style>
		* {
		    margin: 0;
		    padding: 0;
		}
		
		body {
		    height: 100vh;
		    background: linear-gradient(200deg, #dad4ec, #f3e7e9);
		}
		
		ul {
		    position: absolute;
		    top: 50%;
		    left: 50%;
		    transform: translate(-50%, -50%);
		    display: flex;
		    margin: 0;
		    padding: 0;
		}
		
		ul li {
		    list-style: none;
		    transition: 0.5s;
		}
		
		ul li a {
		    position: relative;
		    display: block;
		    text-align: center;
		    margin: 0 30px;
		    color: #333;
		    font-size: 40px;
		    text-decoration: none;
		}
		
		ul:hover li {
		    opacity: 0.2;
		    filter: blur(2px);
		}
		
		ul li:hover {
		    opacity: 1;
		    filter: blur(0px);
		}
	</style>
	<body>
		<ul>
			<li><a href="#">首页</a></li>
			<li><a href="#">关于我们</a></li>
			<li><a href="#">服务</a></li>
			<li><a href="#">案例</a></li>
			<li><a href="#">用户反馈</a></li>
		</ul>
	</body>

</html>